<template>
	<div class="notice-box">
        <span class="icon-notice"></span>
        <ul ref='ul'>
          <li v-for='(item,index) in list'>
          	<a :href="item.responseUrl">
          	{{item.nickName}}
          	<span class="blue_color"> {{item.gameName}}推荐命中 </span>
          	<span class="red"> {{(item.prizeLevel+'').indexOf('01')>-1?'一等奖':(item.prizeLevel+'').indexOf('02')>-1?'二等奖':''}}</span>
          	<span class="red" v-if='item.prize'> {{item.prize}}{{item.expertInterCount>1?'元':'万元'}} &gt;</span>
			</a>
          </li>
        </ul>
     </div>
</template>
<script>
	export default {
		name:'notice-temp',
		props:['list'],
		data(){
			return{
				timer:null,
			}
		},
		mounted(){
			clearInterval(this.timer)
			let self = this;
			setTimeout(function(){
				let ul = self.$refs.ul;
				let len = self.list.length,i=0;
				console.log(len)
				self.timer = setInterval(function(){
					i++;
					if (i>=len) {
						i=0;
						ul.style ='top:0;transition: none .5s;';
					}else{
						ul.style = 'top:'+(-i*0.4)+'rem;transition: top .5s;';
					}
				},1500)
			},1000)
			
		},
		destroyed(){
			// clearInterval(this.timers)
		}
	};
</script>
<style lang="less" scoped>
a,a:visited,a:link{color: #333;text-decoration: none;}
	.notice-box{
		background: #fff;
		padding:.1rem;
		height: .2rem;
		overflow: hidden;
		position: relative;
		display: flex;
		ul{
			font-size: .12rem;
			color: #333;
			position:absolute;
			flex: 1;
			top: 0;
			left: .4rem;
			transition: top .5s;
			li{
				height: .4rem;
				line-height: .4rem;
			}
			.blue_color{
				color: #5187FF
			}
			.red{
				color: #A73432
			}
		}
	}
	.icon-notice{
		width:.2rem;
		height: .2rem;
		background:url(./icon_notice.png) center no-repeat;
		background-size: .16rem auto;
		margin-right: .1rem;
	}
</style>